<label [attr.for]="inputId" class="Checkbox__layout">
    <div class="Checkbox__innerContainer"
          [class.Checkbox__innerContainer--noSideMargin]="!checkboxLabel.textContent || !checkboxLabel.textContent.trim()">
        <input #input
               type="checkbox"
               class="cdk-visually-hidden"
               [id]="inputId"
               [checked]="checked"
               [attr.value]="value"
               [disabled]="disabled"
               [attr.name]="name"
               [tabIndex]="0"
               [indeterminate]="indeterminate"
               [attr.aria-label]="ariaLabel || null"
               [attr.aria-labelledby]="ariaLabelledby"
               [attr.aria-checked]="_getAriaChecked()"
               (change)="_onInteractionEvent($event)"
               (click)="_onInputClick($event)">
        <div class="Checkbox__frame"></div>
        <div class="Checkbox__background">
            <svg version="1.1" focusable="false" class="Checkbox__checkMark" viewBox="0 0 24 24" xml:space="preserve">
                <path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3"></path>
            </svg>
            <!-- Element for rendering the indeterminate state checkbox. -->
            <span class="Checkbox__mixedMark"></span>
        </div>
    </div>

    <span class="Checkbox__label" #checkboxLabel (cdkObserverContent)="_onLabelTextChange()">
        <ng-content></ng-content>
    </span>
</label>
